<template>
	<view>
		<view class="nav f28 c999">
			<view class="all" :class="{active:nav==0}" @tap="changNav(0)">全部</view>
			<picker mode="selector" :range="typeList" @change="" range-key="name">
				<view class="setFlex" :class="{active:nav==1}" @tap="changNav(1)">
					<view class="type">类型</view>
					<image src="../../static/bizhan/down_arrow.png" mode="aspectFill" class="down_arrow" v-if="nav!=1"></image>
					<image src="../../static/bizhan/down_arrow_blue.png" mode="aspectFill" class="down_arrow" v-if="nav==1"></image>
				</view>
			</picker>
			<picker mode="date"  @change="">
				<view class="time" :class="{active:nav==2}" @tap="changNav(2)">时间</view>
			</picker>
			
		</view>
		<view class="detil_box" v-for="(item , index) in detilList">
			<view class="aside_left">
				<view class="f30 c333">订单备注：{{item.ramark}}</view>
				<view class="f30 c333">币种：{{item.coin}}</view>
				<view class="f30 c333">数量：{{item.number}}</view>
			</view>
			<view class="aside_right">
				<view class="f30 c333">余额：<text class="active">{{item.price}}</text></view>
				<view class="f30 c333">类型：{{item.type}}</view>
				<view class="f30 c333">时间：{{item.time}}</view>
			</view>
		</view>
		<view class="have_no">
			没有更多啦！！
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detilList:[
					{remark:'0',coin:'矿池',number:'25',price:'125.0000',type:'注册赠送',time:'2020-03-12 11:06:33'},
					{remark:'0',coin:'矿池',number:'25',price:'25.0000',type:'注册赠送',time:'2020-03-12 11:06:33'}
				],
				typeList:[
					{name:'充值',index:-1},
					{name:'提币',index:0},
					{name:'挖矿',index:1},
					{name:'团队',index:2},
					{name:'交易',index:3},
					{name:'划转',index:4}
				],
				nav:0
			}
		},
		methods: {
			changNav(index){
				this.nav=index
			}
		}
	}
</script>

<style>
.nav{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	height: 76rpx;
}
.down_arrow{
	width: 20rpx;
	height: 12rpx;
	margin-left: 10rpx;
}
.detil_box{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin:14rpx 0 0 30rpx;
	padding:0 30rpx 28rpx 0;
	border-bottom: 1rpx solid #E0E0E0;
}
.aside_right{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.active{
	color: #0297FE;
}
.f30{
	line-height: 48rpx;
}
.have_no{
	font-size:28rpx;
	line-height: 90rpx;
	color:rgba(102,102,102,1);
	text-align: center;
}
.setFlex{
	display: flex;
	align-items: center;
}
</style>
